<template>
    <div class="g-list">
        <h3>成绩表</h3>
        <div class="save-btn">
            <el-button type="primary" @click="saveGradeList">保存成绩表</el-button>
        </div>
        <div class="table-box">
            <el-table
                :data="gradeList"
                :border="showBorder"
                :height="tableHeight"
                :style="tableStyle"
                :header-cell-class-name="headerRowClsName"
                :row-class-name="tebleBaseClsName"
                :cell-class-name="tebleBaseClsName">
                <el-table-column v-for="(item, index) in cols"
                                 :prop="item.prop"
                                 :label="item.label"
                                 :width=item.width>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>
    import { getTitle, getGradeList } from "@/temp/visualData";

    export default {
        name: 'GradeTable',
        data () {
            return {
                cols: [],
                gradeList: [],
                showBorder: true,    // 表格边框
                searchParams: ''
            }
        },      // data
        computed: {
            tableStyle () {
                return {
                    width: 120 * this.cols.length + 1 + 'px'
                }
            },
            tebleBaseClsName () {
                return "table-base";
            },
            tableHeight () {
                return 300;
            },
            headerRowClsName () {
                return "table-header-row";
            }
        },
        methods: {
            /**
             * 初始化表格数据
             */
            initTableData: function () {
                let url = "/grade/listall";
                this.getRequest(url, {}).then(res => {
                    console.log(res);
                    this.cols = getTitle();
                    this.gradeList = res.data['obj'];
                })
            },
            /**
             *  保存成绩
             */
            saveGradeList () {
                let url = "/grade/save";
                // 请求参数
                let data = {
                  cols: this.cols,
                  gradeList: this.gradeList
                };
                this.postRequest(url, data).then(res => {
                    console.log(res);
                });
            }
        },
        mounted () {
            this.initTableData();
        }
    }
</script>

<style scoped>
    .g-list {
        /*text-align: center;*/
    }

    .g-list h3 {
        margin-left: 50%;
    }

    .save-btn {
        margin-left: 70%;
    }

    .table-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* 表格基础样式 */
    .el-table >>> .table-base {
        height: 30px;
        padding: 5px;
        text-align: center;
    }

    .el-table >>> .table-header-row {
        height: 30px;
        padding: 5px;
        text-align: center;
        background-color: aquamarine;
    }

    /* 滚动条样式 */
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 3px;
    }

    .search-input button {
        margin-left: 1px;
    }

    /* 顶部过滤器 */
    .filter-box {
        width: 100%;
        height: 37px;
        background-color: #dddddd;
    }


</style>
